<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>单一按钮显示/隐藏</title>
</head>
<style>
    body,
    div,
    ul,
    li,
    h2 {
        margin: 0;
        padding: 0;
    }

    body {
        font: 12px/1.5 Tahoma;
    }

    ul {
        list-style-type: none;
    }

    #outer {
        width: 200px;
        border: 1px solid #aaa;
        margin: 10px auto;
        position: relative;
    }

    #outer h2 {
        cursor: pointer;
        color: #57646E;
        font-size: 14px;
        font-weight: 400;
        border: 1px solid;
        height: 30px;
        line-height: 30px;
        padding-left: 10px;
        background: #ced3d7 url(img/ico.gif) 180px 15px no-repeat;
        border-color: #fff #e9edf2;
    }

    #outer h2.open {
        background-position: 180px -12px;
    }

    #outer ul {
        border-top: 1px solid #DEE3E6;
        transition: 0.5s;
        overflow: hidden;
        /* height: 100px */
    }

    #outer li {
        height: 25px;
        line-height: 25px;
        vertical-align: top;
    }

    #outer a {
        display: block;
        color: #6b7980;
        background: #e9edf2;
        text-decoration: none;
        padding: 0 10px;
    }

    #outer a:hover {
        background: #fff;
        text-decoration: underline;
    }

    .tringle {
        position: absolute;
        right: 5px;
        top: 5px;
        transform: rotate(180deg);
        transition: 0.5s;
    }
    .tringle::before{
        content: '';
        display: block;
        border: 8px solid red;
        border-left-color: transparent;
        border-right-color: transparent;
        border-top-width:0 ;
    }

    .tringle.up {
        transform: rotate(0);
    }
    .ul-hide{
        max-height: 0 !important;
        /* transform: scaleY(0); */
    }
</style>
<script>

    window.onload = function () {
        //页面加载完毕之后后面的代码才执行
        var outer = document.getElementById('outer')
        console.log(outer)
        var play = document.querySelector('#outer>h2');
        var tringle = document.querySelector('#outer>span')
        var ul = document.querySelector('#outer>ul')

        play.onclick = function(){
            ul.classList.add('ul-hide')
            tringle.classList.add('up')
        }
        
    }

</script>

<body>

    <div id="outer">
        <h2>播放列表...</h2>
        <span class="tringle"></span>
        <ul>
            <li><a href="javascript:;">玩家之徒 - 蔡依林</a></li>
            <li><a href="javascript:;">原谅我就是这样的女生 - 戴佩妮</a></li>
            <li><a href="javascript:;">猜不透 - 丁当</a></li>
            <li><a href="javascript:;">自导自演 - 周杰伦</a></li>
            <li><a href="javascript:;">浪漫窝 - 弦子</a></li>
            <li><a href="javascript:;">流年 - 王菲</a></li>
        </ul>
    </div>

</body>

</html>